<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import { getNBA, getFootball } from "../assets/api/video.js";
import {
  getVideoComment,
  getVideoWith,
  getVideoDetails,
} from "../assets/api/info.js";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";

export default {
  setup() {
    // let router = useRouter();
    let router = useRouter();
    const video = ref(null);
    const edit = ref(null); // edit 是可编辑的div
    const lists = reactive({
      flagser: false, // 收藏
      goodflag: false, // 点赞
      Video_list: "",
      video_details: [], // 视频详情
      withVideo: [], // 相关视频
      video_user: [], // 用户信息
      chat_show_img2: "", // 表情包数组
      timeLeft: 0, //左边时间
      timeRight: 0, //右边时间
      iconPlay: true, // 播放暂停
      currentPlay: 0,
      tabId: 1, // 切换
      tabIds: false, // 上下窗弹出
      common: "",
      commentList: [],
      show: false, // 评论弹窗
      // loading: false,
      // finished: false,
      index: -1,
      count: "",
      // 加载视频
      loadVideo: true,
      showShare: false, // 分享

      options: [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      emojis: [
        {
          id: 1,
          img: "https://qq.yh31.com/tp/zjbq/202103182012577973.gif",
        },
        {
          id: 2,
          img: "https://qq.yh31.com/tp/zjbq/202103182003108629.gif",
        },
        {
          id: 3,
          img: "https://qq.yh31.com/tp/zjbq/202103302125467574.gif",
        },
        {
          id: 4,
          img: "https://qq.yh31.com/tp/zjbq/202103302113573793.gif",
        },
        {
          id: 5,
          img: "https://qq.yh31.com/tp/zjbq/202103302105360079.gif",
        },
        {
          id: 6,
          img: "https://qq.yh31.com/tp/zjbq/202103302056530751.gif",
        },
        {
          id: 7,
          img: "https://qq.yh31.com/tp/zjbq/202110121211491759.gif",
        },
        {
          id: 8,
          img: "https://qq.yh31.com/tp/zjbq/202112021701584188.gif",
        },
      ],
      emojis_two: [
        {
          id: 1,
          img: "https://pic.diydoutu.com/bq/2381.gif",
        },
        {
          id: 2,
          img: "https://inews.gtimg.com/newsapp_match/0/10086388134/0",
        },
        {
          id: 3,
          img: "https://inews.gtimg.com/newsapp_match/0/11416731579/0",
        },
        {
          id: 4,
          img: "https://inews.gtimg.com/newsapp_match/0/12465804697/0",
        },
        {
          id: 5,
          img: "https://inews.gtimg.com/newsapp_match/0/2867181185/0",
        },
        {
          id: 6,
          img: "https://inews.gtimg.com/newsapp_match/0/14553575823/0",
        },
        {
          id: 7,
          img: "https://inews.gtimg.com/newsapp_match/0/3043305169/0",
        },
        {
          id: 8,
          img: "https://inews.gtimg.com/newsapp_match/0/14553575924/0",
        },
      ],
      emojis_three: [
        {
          id: 1,
          img: "https://tva1.sinaimg.cn/large/006mowZngy1gdtcruovmqg308w055hdt.gif",
        },
        {
          id: 2,
          img: "https://tva1.sinaimg.cn/large/006mowZngy1gczaar45qcg309q072e81.gif",
        },
        {
          id: 3,
          img: "https://pic.diydoutu.com/bq/1291.gif",
        },
        {
          id: 4,
          img: "https://pic.diydoutu.com/bqb/8605.gif",
        },
        {
          id: 5,
          img: "https://inews.gtimg.com/newsapp_match/0/7684385635/0",
        },
        {
          id: 6,
          img: "https://inews.gtimg.com/newsapp_match/0/14553575927/0",
        },
        {
          id: 7,
          img: "https://inews.gtimg.com/newsapp_match/0/13406922401/0",
        },
        {
          id: 8,
          img: "https://inews.gtimg.com/newsapp_match/0/14553576118/0",
        },
      ],
      video_list: [],
      video_data: "http://video-upload.qiecdn.com/5cb9679b058ee1555676155023",
      video_data_id: 1,
      video_tfz: null,
      scList: [],
      godlist: [],
    });
    function Like(item) {
      item.is_like += 1;
      item.quote = 1;
    }
    function noLike(item) {
      item.is_like -= 1;
      item.quote = null;
    }
    // 分享
    const onSelect = () => {
      lists.showShare = false;
      Toast("分享成功");
    };
    // 发布图片评论
    const sent = () => {
      lists.show = false;
      lists.commentList.unshift({
        user_info: {
          user_pic: require("../assets/img/flks.jpg"),
          nickname: "大鸿哥无敌",
        },
        quote: null,
        is_like: 0,
        update_time: Date.parse(new Date()) / 1000,
        review: edit.value.innerHTML,
      });
      edit.value.innerHTML = "";
    };
    const details_article = (data, i, index) => {
      // data = JSON.stringify(data);
      // let id = (i + 1) * (index + 1);
      console.log(index);
      console.log(i);
      let id = i + 1;
      window.localStorage.setItem("article_video", JSON.stringify(data));
      router.push({
        path: "/detailsvideo",
        query: {
          id,
        },
      });
      lists.video_data = lists.video_list[id].video;
      video.value.play();
      lists.Video_list = JSON.parse(
        window.localStorage.getItem("article_video")
      );
      getApi();
      window.scrollTo(0, 0);
      // window.location.reload();
    };
    // 发布普通评论
    const sendpl = () => {
      console.log(111);
      lists.commentList.unshift({
        user_info: {
          user_pic: require("../assets/img/flks.jpg"),
          nickname: "大鸿哥无敌",
        },
        quote: null,
        is_like: 0,
        update_time: Date.parse(new Date()) / 1000,
        review: lists.common,
      });
      lists.common = "";
    };
    const editshouchang = () => {
      lists.flagser = !lists.flagser;
      console.log(lists.Video_list);
      lists.Video_list = Object.assign({}, lists.Video_list, {
        checked: false,
      });
      lists.scList.push(lists.Video_list);
      if (lists.flagser) {
        window.localStorage.setItem("sclist", JSON.stringify(lists.scList));
      } else {
        lists.scList = lists.scList.filter((items) => {
          return items.id != lists.Video_list.id;
        });
        window.localStorage.setItem("sclist", JSON.stringify(lists.scList));
      }
    };
    const editgood = () => {
      lists.goodflag = !lists.goodflag;
      lists.godlist.push({
        id: lists.Video_list.id,
      });
      if (lists.goodflag) {
        window.localStorage.setItem("goodList", JSON.stringify(lists.godlist));
      } else {
        lists.godlist = lists.godlist.filter((items) => {
          return items.id != lists.Video_list.id;
        });
        window.localStorage.setItem("goodList", JSON.stringify(lists.godlist));
      }
    };
    // 获取图片
    const getEmojis = (event) => {
      let Img = `<img src="${event.target.src}" style='height:20px;'>`;

      let range, node;
      if (!edit.value.hasfocus) {
        edit.value.focus();
      }
      if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.collapse(false); //光标移至最后

        node = range.createContextualFragment(Img);
        let c = node.lastChild;
        range.insertNode(node);
        if (c) {
          range.setEndAfter(c);
          range.setStartAfter(c);
        }
        let j = window.getSelection();
        j.removeAllRanges();
        j.addRange(range);
      } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(Img);
      }
    };
    // 播放暂停
    const togglePlay = () => {
      if (lists.iconPlay) {
        //播放
        video.value.play();
        ontimeupdateFun();
      } else {
        //暂停
        video.value.pause();
      }

      lists.iconPlay = !lists.iconPlay;
    };
    const onloadeddataFun = () => {
      togglePlay();
      lists.timeRight = lists.video_tfz.duration; //总时长
    };
    // console.log("11111",video.value);
    // 获取左边时间
    const ontimeupdateFun = () => {
      // duration	返回当前视频的长度（以秒计）
      // currentTime	设置或返回视频中的当前播放位置（以秒计）
      lists.timeLeft = lists.video_tfz.currentTime; //实时视频时间
      // 计算进度条值
      lists.currentPlay = 100 * (lists.timeLeft / lists.timeRight);
    };
    const sliderInputFun = (data) => {
      let currentTime = (data / 100) * lists.timeRight;
      lists.timeLeft = currentTime;
      video.value.currentTime = currentTime;
    };
    const sliderDragStartFun = () => {
      video.value.pause();
      lists.iconPlay = true;
    };
    const sliderDragEndFun = () => {
      video.value.play();
      lists.iconPlay = false;
    };
    // 时间过滤器
    const playerTime = (data) => {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); //0:01
      }
    };
    const showPopup = () => {
      lists.show = true;
    };
    function timeago(stringTime) {
      //dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var month = day * 30;
      var time1 = new Date().getTime(); //当前的时间戳
      var time2 = Date.parse(new Date(stringTime)); //指定时间的时间戳
      var time = time1 - time2;

      var result = null;
      if (time < 0) {
        alert("设置的时间不能早于当前时间！");
      } else if (time / month >= 1) {
        result = "" + parseInt(time / month) + "月前";
      } else if (time / week >= 1) {
        result = "" + parseInt(time / week) + "周前";
      } else if (time / day >= 1) {
        result = "" + parseInt(time / day) + "天前";
      } else if (time / hour >= 1) {
        result = "" + parseInt(time / hour) + "小时前";
      } else if (time / minute >= 1) {
        result = "" + parseInt(time / minute) + "分钟前";
      } else {
        result = "刚刚";
      }
      return result;
    }
    const getApi = () => {
      getVideoComment({
        page: 1,
        video_id: lists.Video_list.id,
      })
        .then((data) => {
          lists.commentList = data.data.comments;
          // console.log("111",lists.commentList);
          lists.count = data.data.pages.count;
        })
        .then(() => {
          if (lists.count > 10) {
            getVideoComment({ page: 2, video_id: lists.Video_list.id })
              .then((data) => {
                for (var j = 0; j < data.data.comments.length; j++) {
                  lists.commentList.push(data.data.comments[j]);
                }
              })
              .then(() => {
                if (lists.count > 20) {
                  getVideoComment({
                    page: 3,
                    video_id: lists.Video_list.id,
                  }).then((data) => {
                    for (var j = 0; j < data.data.comments.length; j++) {
                      lists.commentList.push(data.data.comments[j]);
                    }
                  });
                }
              });
          }
        });
      // 相关视频
      getVideoWith({
        video_id: lists.Video_list.id,
      }).then((data) => {
        lists.withVideo = data.data;
      });
      // 视频-详情
      getVideoDetails({ video_id: lists.Video_list.id }).then((data) => {
        // console.log(data);
        lists.video_user = data.data.video_info.user_info;
        // console.log(lists.video_user);
        lists.video_details = data.data.video_info;
      });
    };
    onMounted(() => {
      if (!window.localStorage.getItem("sclist")) {
        window.localStorage.setItem("sclist", JSON.stringify([]));
      } else {
        lists.scList = JSON.parse(localStorage.getItem("sclist"));
      }

      if (!window.localStorage.getItem("goodList")) {
        window.localStorage.setItem("goodList", JSON.stringify([]));
      } else {
        lists.godlist = JSON.parse(localStorage.getItem("goodList"));
      }

      lists.Video_list = JSON.parse(
        window.localStorage.getItem("article_video")
      );
      //NBA视频
      const route = useRoute();
      // console.log(route.query.id);
      getNBA({
        vid: "12355222912594130461",
        pd: "h5",
        act: "h5Rec",
      }).then((data) => {
        data.data.response.videos.forEach((item) => {
          lists.video_list.push({
            id: lists.video_data_id,
            video: item.play_url,
          });
          lists.video_data_id += 1;
        });
      });
      getFootball({
        vid: "407995234352830557",
        pd: "h5",
        act: "h5Rec",
        title:
          "兄弟们，世界杯中国力克英格兰的超燃剪辑来了！【隐藏组 #球迷  #为中国足球加油 #𝟮𝟬𝟮𝟮世界杯",
      }).then((data) => {
        data.data.response.videos.forEach((item) => {
          lists.video_list.push({
            id: lists.video_data_id,
            video: item.play_url,
          });
          lists.video_data_id += 1;
        });

        setTimeout(() => {
          lists.video_data = lists.video_list[route.query.id - 1].video;
          lists.loadVideo = false;
        }, 1000);
        // console.log(lists.video_list);
        // if (lists.video_list[route.query.id - 1].video) {
        //   lists.video_data = lists.video_list[route.query.id - 1].video;
        // }
        // 判断是否收藏
        lists.scList.map((item) => {
          if (item.id == lists.Video_list.id) {
            lists.flagser = true;
          }
        });

        lists.godlist.map((item) => {
          if (item.id == lists.Video_list.id) {
            lists.goodflag = true;
          }
        });
      });

      lists.video_tfz = video.value;
      getApi();
    });
    return {
      ...toRefs(lists),
      onloadeddataFun,
      ontimeupdateFun,
      sliderDragStartFun,
      sliderDragEndFun,
      getEmojis,
      sliderInputFun,
      playerTime,
      togglePlay,
      video,
      edit,
      timeago,
      showPopup,
      sent,
      sendpl,
      Like,
      noLike,
      details_article,
      editshouchang,
      editgood,
      onSelect,
    };
  },
};
</script>
<template>
  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
    @select="onSelect"
    :overlay="false"
  />
  <div class="container" style="background: #fff">
    <van-sticky>
      <top-com></top-com>
    </van-sticky>
    <div class="video-box">
      <div class="video-bf">
        <meta name="referrer" content="no-referrer" />
        <video
          :src="video_data"
          width="100%"
          autoplay
          ref="video"
          @timeupdate="ontimeupdateFun"
          @loadeddata="onloadeddataFun"
        ></video>
        <van-loading type="spinner" v-if="loadVideo" />
      </div>

      <div class="title">
        <a href="javascript:;" @click="$router.go(-1)">
          <i class="iconfont icon-zuobian"></i>
        </a>
        <span>{{ Video_list.title }}</span>
      </div>
      <div class="bottom">
        <div class="left" @click="togglePlay">
          <i class="iconfont icon-shipinbofangshibofang" v-show="iconPlay"></i>
          <i class="iconfont icon-iconstop" v-show="!iconPlay"></i>
        </div>
        <div class="mid">
          <div class="left-time">{{ playerTime(timeLeft) }}</div>
          <div class="jdt">
            <van-slider
              v-model="currentPlay"
              :button-size="6"
              :active-color="'#ff0000'"
              @change="sliderInputFun"
              @drag-start="sliderDragStartFun"
              @drag-end="sliderDragEndFun"
            />
          </div>
          <div class="right-time">{{ playerTime(timeRight) }}</div>
        </div>
        <div class="right">
          <i class="iconfont icon-quanping"></i>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="tabs">
        <ul>
          <li :class="{ active: tabId == 1 }" @click="tabId = 1">简介</li>
          <li :class="{ active: tabId == 2 }" @click="tabId = 2">评论</li>
        </ul>
      </div>
    </div>
    <div class="tab" v-show="tabId == 1">
      <div class="intrude">
        <div class="name">{{ video_details.title }}</div>
        <div class="icon">
          <div class="bf">
            <i class="iconfont icon-24gl-play"></i>
            <div class="num">{{ Video_list.click_num }}</div>
          </div>
          <div class="pl">
            <i class="iconfont icon-pinglun"></i>
            <div class="num">{{ Video_list.review_num }}</div>
          </div>
          <div class="class">分类: {{ Video_list.bottom_tags }}</div>
        </div>
        <div class="brief">简介: {{ video_details.video_desc }}</div>
      </div>
      <div class="icon-nav">
        <div class="fx" @click="showShare = true">
          <i class="iconfont icon-fenxiang_2"></i>
          <div class="text">分享</div>
        </div>
        <div class="sc" @click="editshouchang">
          <i class="iconfont icon-shoucang" v-show="!flagser"></i>
          <i class="iconfont icon-shoucang1 con" v-show="flagser"></i>
          <div class="text">收藏</div>
        </div>
        <div class="dz" @click="editgood">
          <i
            class="iconfont icon-appreciate_fill_light con"
            v-show="goodflag"
          ></i>
          <i class="iconfont icon-appreciate_light" v-show="!goodflag"></i>
          <div class="text">点赞</div>
        </div>
      </div>
      <div class="user">
        <ul>
          <li class="user-list">
            <div class="left">
              <img :src="video_user.user_pic" alt="" />
              <div class="title">
                <div class="name">{{ video_details.nickname }}</div>
                <div class="fan">
                  上传于 {{ timeago(video_details.create_time * 1000) }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="video">
        <div class="video-title">相关视频</div>
        <ul class="video-list">
          <li
            v-for="(item, i) in withVideo"
            :key="item.id"
            @click="details_article(item, i, index)"
          >
            <img :src="item.video_icon" alt="" />
            <div class="text">
              <div class="name">{{ item.video_desc }}</div>
              <div class="acthor">up主: {{ item.nickname }}</div>
              <div class="icon">
                <div class="bf">
                  <i class="icon-paishipin iconfont"></i>
                  <div class="num">{{ item.click_num }}</div>
                </div>
                <div class="pl">
                  <i class="icon-comment_light iconfont"></i>
                  <div class="num">{{ item.coupon_num }}</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 评论 -->
    <div class="tab" v-show="tabId == 2">
      <div class="plcon">
        <div class="pl-title" v-if="commentList.length != 0">最新评论</div>
        <van-empty
          class="custom-image"
          image="../assets/img/null2.png"
          description="暂无评论"
          v-if="commentList.length == 0"
        />
        <div class="content">
          <ul class="pl-list">
            <li v-for="item in commentList" :key="item.id">
              <img
                :src="item.user_info.user_pic"
                alt=""
                v-if="item.user_info.user_pic"
              />
              <img
                src="../assets/img/flks.jpg"
                alt=""
                v-if="!item.user_info.user_pic"
              />
              <div class="text">
                <div class="top">
                  <div class="name">{{ item.user_info.nickname }}</div>
                  <div class="good">
                    {{ item.is_like }}
                    <i
                      class="iconfont icon-appreciate_fill_light con"
                      v-if="item.quote == 1"
                      @click="noLike(item)"
                    ></i>

                    <i
                      class="iconfont icon-appreciate_light"
                      v-if="item.quote == null"
                      @click="Like(item)"
                    ></i>
                  </div>
                </div>
                <div class="time">{{ timeago(item.update_time * 1000) }}</div>
                <div class="cont" v-html="item.review"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="replay">
        <div class="bq" @click="showPopup">
          <i class="iconfont icon-a-weixiaobiaoqing"></i>
        </div>
        <div class="inp">
          <input
            class="input"
            id="emojiText"
            type="text"
            contenteditable="true"
            placeholder="评论点啥不?"
            v-model="common"
            autocomplete="off"
            @keydown.enter="sendpl"
          />
        </div>
        <div class="btn" @click="sendpl">发表</div>
      </div>
      <van-popup
        v-model:show="show"
        round
        position="bottom"
        :style="{ height: '32%' }"
        :overlay="false"
      >
        <div class="tops">
          <div class="bq" @click="show = false">
            <i class="iconfont icon-31xiala"></i>
          </div>
          <div class="inp">
            <div
              class="input"
              id="emojiText"
              type="text"
              contenteditable="true"
              placeholder="评论点啥不?"
              ref="edit"
              autocomplete="off"
              @keydown.enter="sent"
            ></div>
          </div>
          <div class="btn" @click="sent">发表</div>
        </div>
        <div class="item">
          <ul>
            <li v-for="item in emojis" :key="item.name">
              <img :src="item.img" alt="" @click="getEmojis" />
            </li>
          </ul>
          <ul>
            <li v-for="item in emojis_two" :key="item.name">
              <img :src="item.img" alt="" @click="getEmojis" />
            </li>
          </ul>
          <ul>
            <li v-for="item in emojis_three" :key="item.name">
              <img :src="item.img" alt="" @click="getEmojis" />
            </li>
          </ul>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.item {
  ul {
    display: flex;
    li {
      display: flex;
      width: 12.5%;
      margin: 5px 0;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
// 发布评论
.tops {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
  .bq {
    .iconfont {
      font-size: 24px;
      color: #8b8b8b;
    }
  }
  .inp {
    .input {
      outline: none;
      border: none;
      background: #f8f8f8;
      color: #666;
      border-radius: 10px;
      height: 34px;
      line-height: 34px;
      padding: 0 10px;
      font-size: 14px;
      width: 265px;
      display: flex;
      align-items: center;
    }
  }
  .btn {
    font-size: 10px;
    line-height: 26px;
    text-align: center;
    width: 48px;
    height: 26px;
    background: #ff5c5b;
    color: #f4fff4;
    border-radius: 10px;
  }
}
.replay {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 50px;
  align-items: center;
  background: #fff;
  .bq {
    .iconfont {
      font-size: 24px;
      color: #8b8b8b;
    }
  }
  .inp {
    .input {
      outline: none;
      border: none;
      background: #f8f8f8;
      color: #666;
      border-radius: 10px;
      height: 34px;
      line-height: 34px;
      padding: 0 10px;
      font-size: 14px;
      width: 265px;
      display: flex;
      align-items: center;
    }
  }
  .btn {
    font-size: 10px;
    line-height: 26px;
    text-align: center;
    width: 48px;
    height: 26px;
    background: #ff5c5b;
    color: #f4fff4;
    border-radius: 10px;
  }
}
// 评论
.plcon {
  margin-top: 50px;
  padding: 0 14px 40px;
  border-top: 1px solid #f4f4f4;
  background: #f2f2f2;
  .content {
    width: 100%;

    .pl-list {
      width: 100%;

      li {
        display: flex;
        border-bottom: 1px solid #f4f4f4;
        width: 100%;
        margin-bottom: 16px;

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
        .text {
          margin-left: 10px;
          width: 100%;
          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .name {
              color: #ababab;
              font-size: 14px;
              margin-bottom: 4px;
            }
            .good {
              font-size: 10px;
              color: #ababab;
              .iconfont {
                margin-left: 4px;
                font-size: 14px;
              }
            }
          }

          .time {
            font-size: 10px;
            color: #ababab;
            margin-bottom: 8px;
          }
          .cont {
            display: flex;
            align-items: center;
            color: #000;
            font-size: 12px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}
.pl-title {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #858585;
  display: flex;
  justify-content: space-between;
}
// 相关视频
.video {
  padding: 0 14px;
  .video-list {
    padding-bottom: 1px;
    li {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-around;
      img {
        width: 120px;
        height: 74px;
        border-radius: 8px;
      }
      .text {
        margin-left: 10px;
        .name {
          width: 215px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #1b1b1b;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 6px;
        }
        .acthor {
          font-size: 12px;
          color: #ababab;
          margin-bottom: 14px;
        }
        .icon {
          display: flex;
          font-size: 12px;
          color: #c4c4c4;
          .iconfont {
            margin-right: 4px;
          }
          .bf {
            display: flex;
            margin-right: 16px;
            align-items: center;
          }
          .pl {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
.video-title {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-weight: bold;
  color: #414141;
  display: flex;
  justify-content: space-between;
}

.user {
  padding: 0 12px;
  border-top: 10px solid #f4f4f4;
  border-bottom: 10px solid #f4f4f4;
  .user-list {
    display: flex;
    padding: 10px 2px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .title {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .name {
          margin: 0 0 2px;
          color: #353535;
          font-size: 18px;
          font-weight: bold;
        }
        .fan {
          color: #b1b1b1;
          font-size: 10px;
        }
      }
    }
    .right {
      .btn-gz {
        .iconfont {
          font-size: 10px;
          margin-right: 2px;
        }
        width: 56px;
        height: 24px;
        background: #fad542;
        color: #000;
        border-radius: 10px;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
      .btn-ygz {
        width: 56px;
        height: 24px;
        background: #e5e5e5;
        color: #000;
        border-radius: 10px;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
}
.nav {
  position: fixed;
  width: 100%;
  background: #fff;
  .tabs {
    color: #656565;
    background-color: #fff;
    overflow-y: hidden;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      height: 50px;
      line-height: 50px;
      position: relative;
      white-space: nowrap;
      display: flex;
      position: relative;
      justify-content: space-evenly;

      li {
        position: relative;
        span {
          color: #999;
          font-size: 16px;
          margin: 0 18px;
          font-weight: 700;
        }
        &.active {
          font-weight: 700;
          color: #151515;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 40%;
            right: 0;
            margin: 0 auto;
            height: 2px;
            background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
          }
        }
      }
    }
  }
  .right {
    width: 90px;
    height: 50px;
    display: flex;
    color: white;
    background-color: #f6d53d;
    padding: 0 13px;
    align-items: center;
    .iconfont {
      font-size: 20px;
      margin-right: 8px;
    }
    .atten {
      font-size: 14px;
      font-weight: 400;
      .num {
        font-size: 12px;
      }
    }
  }
}
.icon-nav {
  display: flex;
  padding: 12px 0px;
  justify-content: space-around;
  .iconfont {
    font-size: 20px;
    color: #000;
  }
  .text {
    margin-left: 10px;
    font-size: 12px;
  }
  .fx {
    display: flex;
    align-items: center;
  }
  .sc {
    display: flex;
    align-items: center;
    .con {
      color: red;
    }
  }
  .dz {
    display: flex;
    align-items: center;
    .con {
      color: red;
    }
  }
}
.intrude {
  margin: 48px 0 0;
  padding: 12px 14px;
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  .name {
    font-size: 17px;
    font-weight: bold;
    color: #3d3d3d;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    text-overflow: ellipsis;
    margin-bottom: 8px;
  }
  .icon {
    color: #9c9c9c;
    display: flex;
    font-size: 10px;
    align-items: center;
    margin-bottom: 8px;
    .iconfont {
      font-size: 10px;
    }
    .num {
      margin-left: 6px;
    }
    .bf {
      display: flex;
      margin-right: 10px;
    }
    .pl {
      display: flex;
    }
    .class {
      margin-left: 20px;
    }
  }
  .brief {
    color: #9c9c9c;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    text-overflow: ellipsis;
  }
}
.video-box {
  position: relative;
  height: 211px;
  background: #000;
  .video-bf {
    height: 211px;
    position: fixed;
    background: #000;
    video {
      height: 210px;
      width: 375px;
    }
  }

  .title {
    display: flex;
    color: white;
    width: 100%;
    position: fixed;
    max-width: 750px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 49px;
    padding: 10px 10px 20px 10px;
    font-size: 16px;
    z-index: 14;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0, #000 100%);
    word-break: break-all;
    .iconfont {
      font-size: 20px;
      color: #fff;

      margin-right: 4px;
    }
  }
  .bottom {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 221px;
    left: 0;
    z-index: 122;
    max-width: 750px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0,
      #000 100%
    ) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    color: #fff;
    font-size: 13px;
  }
  .mid {
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .jdt {
      width: 160px;
      height: 24px;
      position: relative;
      margin-top: 22px;
    }
  }
}
::v-deep .van-share-sheet__options {
  justify-content: center;
}
::v-deep .van-loading {
  position: fixed;
  top: 8%;
  z-index: 100;
  background-color: #333333;
  width: 100%;
  height: 213px;
  line-height: 213px;
  text-align: center;
}
.con {
  color: red;
}
</style>
